<template>
	<view>
		<view v-for="(item, index) in couponList" :key="index">
			<view v-if="item.status==subscript" class="coupon_box">
				<!-- 优惠卷左侧内容 -->
				<view class="left" >
					<!-- 第一行 -->
					<view class="left_top">
						<text class="hui" :style="'background:' + colors">惠</text>
						<text class="hui_name">{{item.name}}</text>
					</view>
					<!-- 第二行 -->
					<view class="left_middle">
						<text>
							<slot v-if="item.mid==null">通用优惠劵</slot>
							<slot v-else>仅限{{item.mid}}使用</slot>
						</text>
					</view>
					<!-- 第三行 -->
					<view class="left_bottom">
						<text>
							<slot>有效期：{{item.start}}至{{item.end}}</slot>
						</text>
					</view>
				</view>
				<!-- 已使用图标 -->
				<image src="./ysy.png" class="ysy" v-if="item.status == 1"></image>
				<!-- 优惠卷右侧内容 -->
				<view class="right" :style="'background:' + (item.status == 0 ? colors:'')">
					<view class="money" v-if="item.triggerMoney!=null">￥{{item.preferentialMoney}}</view>
					<text v-if="item.triggerMoney!=null">满{{item.triggerMoney}}可用</text>
					<text class="discount" v-if="item.triggerMoney==null">￥{{item.discount}}折</text>
					<text class="shiyong" :style="{'color': colors}" v-if="item.status == 0"
						@click="jumpNext(item)">立即使用</text>
				</view>
				
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
			};
		},

		components: {},
		props: {
			colors: {
				type: String
			},
			couponList: {
				type: Array
			},
			subscript: {
				type: Number
			}
		},
		methods: {
			jumpNext(item) {
				this.$emit("itemClick", item.name);
			}
		}
	};
</script>

<style scoped lang="scss">
	.coupon_box {
		margin: 28upx 28upx;
		box-shadow: 0upx 0upx 10upx #ddd;
		position: relative;
		border-radius: 10upx;
		overflow: hidden;
		display: flex;
	}

	.coupon_box .left {
		width: 70%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 20upx;
		// float: left;
		// margin-top: 20px;
	}

	.coupon_box .left .hui {
		width: 40upx;
		height: 40upx;
		font-size: 20upx;
		color: #fff;
		background-color: #EC1818;
		border-radius: 8upx;
		line-height: 40upx;
		text-align: center;
		display: inline-block;
		transform: translateY(-5upx);
	}

	.coupon_box .left .left_top {
		width: 60vw;
		display: block;
		font-size: 26upx;
		font-weight: bold;

	}

	.left_top .hui_name {
		line-height: 60upx;
		height: 60upx;
		margin-left: 20upx;
		display: inline-block;
	}

	.left_middle {
		font-size: 24upx;
		font-weight: bold;
		color: #333;
		height: 30upx;
		line-height: 30upx;
	}

	.left_bottom {
		font-size: 24upx;
		font-weight: bold;
		color: #333;
		height: 60upx;
		line-height: 60upx;
	}

	.coupon_box .right {
		text-align: center;
		height: 190upx;
		width: 190upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		background-color: #A8A8A8;
		// float: right;
	}

	.coupon_box .right .shiyong {
		height: 40upx;
		line-height: 40upx;
		background-color: #fff;
		border-radius: 20upx;
		padding: 0 20upx;
		margin-top: 10upx;
		color: #A8A8A8;

	}

	.coupon_box .right .money {
		font-size: 45upx;
		color: #fff;
	}
	
	.coupon_box .right text{
		color: #fff;
		height: 40upx;
		line-height: 34upx;
	}
	
	.coupon_box .right text:nth-child(1){
		font-size: 45upx;
	}
	
	.coupon_box .right text:nth-child(2){
		font-size: 24upx;
	}

	// .coupon_box .bottom {
	// 	height: 60upx;
	// 	line-height: 60upx;
	// 	display: flex;
	// 	align-content: flex-start;
	// 	font-size: 24upx;
	// 	margin-top: 10upx;
	// }

	// 
	// .coupon_box .bottom view {
	// 	margin-right: 20upx;
	// 	color: #888;
	// 	font-weight: bold;
	// }

	// 已使用图标
	.ysy {
		width: 80upx;
		height: 80upx;
		position: absolute;
		top: 20upx;
		right: 200upx;
	}
</style>